<template>
	<view>
		<message v-if="selected === 0"></message>
		<create-rule v-if="selected === 1"></create-rule>
		<my v-if="selected === 2"></my>
		<view class="tab-bar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
			<template v-for="tab in tabList" :key="tab.selected">
				<view class="tab-bar-item" v-if="tab.selected !== 1" @click="switchTab(tab)">
					<image :src="tab.selected !== selected ? tab.src : tab.srcActive">
					</image>
					<view :class="['text', tab.selected !== selected ? 'active' : '']">{{tab.title}}</view>
				</view>
				<view class="tab-bar-item publish" v-else @click="switchTab(tab)">
					<view class="publish-btn">
						<image src="/static/tabbar/plus.svg"></image>
					</view>
				</view>
			</template>
		</view>

		<user-login-popup ref="ulpRef"></user-login-popup>
	</view>
</template>

<script>
	import Message from '@/pages/message/message.vue';
	import CreateRule from '@/pages/create-rule/create-rule.vue';
	import My from '@/pages/my/my.vue';

	import UserLoginPopup from '@/components/user-login-popup.vue';
	export default {
		components: {
			Message,
			CreateRule,
			My,
			UserLoginPopup
		},
		onShareAppMessage() {
			return {
				title: '欢迎使用小依',
				path: '/pages/tab-bar/tab-bar',
				imageUrl: '/static/share-image.png'
			}
		},
		data() {
			return {
				selected: 0,
				paddingBottomHeight: getApp().globalData.paddingBottomHeight,
				tabList: [{
					selected: 0,
					title: '消息',
					src: '/static/tabbar/message.svg',
					srcActive: '/static/tabbar/message-active.svg'
				}, {
					selected: 1,
					title: '创建你的角色',
					path: ''
				}, {
					selected: 2,
					title: '我的',
					src: '/static/tabbar/my.svg',
					srcActive: '/static/tabbar/my-active.svg'
				}]
			}
		},
		mounted() {
			this.$refs.ulpRef.open();
		},
		methods: {
			switchTab(tab) {
				// if (tab.selected !== 1) {
					this.selected = tab.selected;
					uni.setNavigationBarTitle({
						title: tab.title
					})
				// }
			}
		}
	}
</script>

<style>
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 110rpx;
		background: white;
		display: flex;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.tab-bar-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tab-bar-item image {
		width: 50rpx;
		height: 50rpx;
	}

	.tab-bar-item .text {
		font-size: 24rpx;
		color: #999;
		margin-top: 6rpx;
	}

	.tab-bar-item .text.active {
		color: #4E5969;
	}

	.publish {
		position: relative;
		top: -30rpx;
	}

	.publish-btn {
		width: 120rpx;
		height: 120rpx;
		background: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.publish-btn image {
		margin-top: 6px;
		width: 110rpx;
		height: 110rpx;
	}
</style>